<template>
    <Modal
        :title="$i18n.t('ASSIGN_TASK')"
        v-model="show"
        width="400"
    >
        <div class="content">
            <div class="task-count">{{ $i18n.t('SELECTED_TASK_COUNT') }}: {{ taskCount }}</div>
            <div class="assign-to">
                <span style="color:red;font-size: 14px; font-weight:bold">* </span>
                <span>{{ $i18n.t('ASSIGN_TASK_TO_FOLLOWER') }}：</span>
                <el-select v-model="value">
                    <el-option v-for="(item, index) in data" :key="index" :value="item.value" :label="item.label"></el-option>
                </el-select>
            </div>
            <!--<el-radio-group v-model="value" style="margin-top: 10px">
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="16" :md="12" :lg="6" :xl="6" v-for="(item, index) in data" :key="index" style="margin-top: 10px">
                        <el-radio :label="item.value">{{ item.label }}</el-radio>
                    </el-col>
                </el-row>
            </el-radio-group>-->
        </div>
        <span slot="footer" class="dialog-footer">
            <slot name="footer"></slot>
        </span>
    </Modal>
</template>

<script>
    export default {
        name: 'AssignTaskDialog',
        props: ['dialogVisible', 'taskCount', 'radioList', 'adminId'],
        data () {
            return {
                value: this.adminId
            }
        },
        watch: {
            value (value) {
                this.$emit('update:adminId', value)
            }
        },
        computed: {
            show: {
                get () {
                    return this.dialogVisible
                },
                set (value) {
                    this.$emit('update:dialogVisible', value)
                }
            },
            data () {
                return [
                    { label: this.$i18n.t('CANCEL_ASSIGN'), value: 0 },
                    ...this.radioList
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
    .content {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 12px;
        .task-count {
        }
        .assign-to {
            padding-top: 20px;
        }
    }
</style>
